<template>
  <div class="chat-list-wrapper">
    <el-scrollbar :height="height">
      <chat-item v-for="(item, index) in list" :key="item" @click="handleItem(index)" :avatar-url="item.avatarUrl"
        :name="item.name" :date="item.date" :msg="item.msg" :class="index == currentIndex ? 'active' : ''" />
    </el-scrollbar>
  </div>
</template>

<script>
import ChatItem from './ChatItem.vue'
export default {
  name: 'ChatList',
  components: {
    ChatItem
  },
  props: {
    height: {
      type: String,
      default: '400px'
    },
    list: {
      // ArrayItemType: {
      //   avatarUrl: "",
      //   name: "",
      //   date: "",
      //   msg:""
      // },
      type: Array,
      // default: () => new Array(4)
    }
  },
  data() {
    return {
      currentIndex: '-1'
    }
  },
  mounted() {
    if (this.list.length > 0) { this.currentIndex = 0 }
  },
  methods: {
    handleItem(index) {
      this.currentIndex = index
      this.$emit('changeChatItem', index)
    }
  },
  expose: ['currentIndex']
}
</script>

<style lang="scss" scoped>
.active {
  background-color: var(--el-color-primary-light-8);
}
</style>
